<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <link rel="icon" href="/favicon.ico" type="image/png">

</head>
<body>
<div id="app">
    <div id="ShopCart" style="text-align: center;margin: 0 auto; display: flex;justify-content: center;" >
        <div>
            <img th:src="${commodity.picture}">
            <p style="font-size: 20px"><span th:text="${commodity.tradeName}"></span></p>
            <p style="text-align: center;">
                商品编号:<span th:text="${commodity.cId}" style=" color: #ee9900"></span>
                <span style="margin:0 30px;">商品价格:<span th:text="${commodity.price}" style="color: #ff4d51"></span></span>
                商品库存:<span th:text="${commodity.quan}" style="color: #1cce66"></span>
            </p>
            <p>
                <el-button v-if="!poId" type="primary" @click="createOrder">下单</el-button>
                <el-button v-else type="success" @click="pay">付款</el-button>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                poId:null,
                userId:new Date().getTime()
            }
        },
        mounted() {
        },
        methods: {
            pay(){
                if (this.poId && this.poId != '-1'){
                    //进行支付
                    this.sysMethod({url:"lxserver/order/pay?poId="+this.poId,method:'get',params:{}}).then(res=>{
                        this.$message({message: res.data, type: 'success'});
                    })
                }else{
                    this.$message({message: "未下单!", type: 'error'});
                }
            },
            createOrder(){
                var that = this;
                that.sysMethod({url:"secondsKill/createOrder?userId="+that.userId+"&cId=[[${commodity.cId}]]",method:'get',params:{}}).then(res=>{
                    if(res.data && res.data != '0'){
                        that.$message('排队中!');
                        var myTarget = setInterval(function(){
                            that.sysMethod({url:"secondsKill/queryOrder?userId="+that.userId+"&cId=[[${commodity.cId}]]",method:'get',params:{}}).then(res1=>{
                                if (res1.data){
                                    if (res1.data != '0'){
                                        that.poId = res1.data;
                                        clearInterval(myTarget);
                                        that.$message({message: "下单成功:"+that.poId, type: 'success'});
                                    }
                                }else{
                                    that.$message({message: "库存不足!", type: 'error'});
                                    location.reload();
                                    clearInterval(myTarget);
                                }
                            });
                        }, 1000);

                    }else{
                        that.$message({message: "库存不足!", type: 'error'});
                    }
                })
            }

        }
    })
</script>

<style scoped>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    #ShopCart>div {
        float: left;
        width: 500px;
        height: 680px;
        margin: 10px 10px 13px 12px;
        padding: 8px;
        border: 1px solid #919191;
        transition: all 0.5s;
    }


    #ShopCart>div>img {
        width: 480px;
        height: 480px;
    }

    #ShopCart>div>p {
        width: 480px;
        font-size: 15px;
        text-align: justify;
        /* text-indent: 2rem; */
    }

    #ShopCart>div>p:nth-of-type(1) {
        overflow: hidden;
        width: 480px;
        height: 60px;
        margin-top: 5px;
    }

    #ShopCart>div>p:nth-of-type(3) {
        position: absolute;
        margin-top: 30px;
        text-align: center;
    }
    .el-button{
        width: 100px;;
    }
</style>
</body>
</html>
